HTML छवियां
छवियाँ वेब पेज के डिज़ाइन और लुक को बढ़ाती हैं।
img1.png
यह img1.png नामक छवि का एक उदाहरण है। छवियाँ आपके वेब पेजों को आकर्षक बनाती हैं!
उदाहरण:
HTML छवियों का सिंटैक्स
HTML <img> टैग का उपयोग किसी वेब पेज में किसी छवि को एम्बेड करने के लिए किया जाता है।
छवियाँ तकनीकी रूप से वेब पेजों में एम्बेडेड नहीं हैं; छवियाँ वेब पेजों से जुड़ी हुई हैं। <img> टैग निर्दिष्ट छवि के लिए स्थान बनाता है।
महत्वपूर्ण नोट:
<img> टैग खाली है, इसमें केवल विशेषताएँ हैं, कोई समापन टैग नहीं है।
<img> टैग में दो आवश्यक गुण हैं:
स्रोत विशेषता
छवि के लिए पथ (यूआरएल) निर्दिष्ट करता है
वैकल्पिक विशेषता
छवि के लिए प्रतिस्थापन पाठ निर्दिष्ट करता है
वाक्यविन्यास
<img src="url" alt="alternatetext">स्रोत विशेषता
आवश्यक स्रोत विशेषता छवि के लिए पथ (यूआरएल) निर्दिष्ट करती है।
नोट:
जब कोई वेब पेज लोड होता है, तो ब्राउज़र स्वयं वेब सर्वर से छवि लाता है और उसे पेज में सम्मिलित करता है। इसलिए, सुनिश्चित करें कि छवि वास्तव में वेब पेज के सापेक्ष उसी स्थान पर है, अन्यथा आपके आगंतुकों को एक टूटा हुआ लिंक आइकन मिलेगा।
उदाहरण
<img src="img_chania.jpg" alt="Flowers in Chania">कोशिश करना:
जब छवि उपलब्ध नहीं होती तो क्या होता है:
यदि ब्राउज़र छवि नहीं ढूंढ पाता है, तो यह मान को वैकल्पिक रूप से प्रदर्शित करेगा
वैकल्पिक विशेषता
आवश्यक ऑल्ट विशेषता किसी छवि के लिए ऑल्ट टेक्स्ट प्रदान करती है यदि उपयोगकर्ता किसी कारण से इसे नहीं देख पाता है (धीमे लिंक के कारण, src विशेषता में त्रुटि के कारण, या यदि उपयोगकर्ता स्क्रीन रीडर का उपयोग कर रहा है)।
संपूर्ण पंजाब में मान को छवि का वर्णन करना चाहिए:
उदाहरण
<img src="img_chania.jpg" alt="Flowers in Chania">जब छवि उपलब्ध न हो:
<img src="wrongname.gif" alt="Flowers in Chania">स्क्रीन रीडर के बारे में:
स्क्रीन रीडर एक सॉफ्टवेयर प्रोग्राम है जो HTML कोड के माध्यम से कदम बढ़ाता है और उपयोगकर्ता को सामग्री को "सुनने" की अनुमति देता है। स्क्रीन रीडर दृष्टिबाधित या सीखने की अक्षमता वाले लोगों के लिए उपयोगी हैं।
छवि का आकार - चौड़ाई और ऊंचाई
आप छवि की चौड़ाई और ऊंचाई निर्दिष्ट करने के लिए शैली विशेषता का उपयोग कर सकते हैं।
उदाहरण 1: शैली विशेषता के साथ
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">उदाहरण 2: चौड़ाई और ऊंचाई विशेषताओं के साथ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">चौड़ाई और ऊंचाई गुण छवि की चौड़ाई और ऊंचाई को पिक्सेल में परिभाषित करते हैं।
महत्वपूर्ण नोट:
छवि की चौड़ाई और ऊंचाई निर्दिष्ट करते समय। यदि चौड़ाई और ऊंचाई निर्दिष्ट नहीं है, तो छवि लोड होने पर वेब पेज चरमरा सकता है।
Width and Height, or Style?
चौड़ाई, ऊंचाई और शैली गुण सभी HTML में मान्य हैं।
हालाँकि, हम शैली विशेषता का उपयोग करने की सलाह देते हैं। यह स्टाइल शीट को छवियों का आकार बदलने से रोकता है:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>विभिन्न आकार की छवियां:
विभिन्न स्थानों पर चित्र
उप-फ़ोल्डर में छवियाँ
यदि आपकी छवियां सबफ़ोल्डर में हैं, तो फ़ाइल नाम को src विशेषता में जोड़ें:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">दूसरे सर्वर पर छवियाँ
कुछ वेबसाइटें किसी छवि को दूसरे सर्वर पर इंगित करती हैं।
<img src="https://www.jassifteam.com/images/logo.jpg" alt="Jassif Team Logo">बाहरी छवियों पर नोट्स:
बाहरी छवियाँ कॉपीराइट के अंतर्गत हो सकती हैं। यदि आप बिना अनुमति के इसका उपयोग करते हैं, तो आप कॉपीराइट कानूनों का उल्लंघन कर सकते हैं। इसके अतिरिक्त, आप बाहरी छवियों को नियंत्रित नहीं कर सकते; इन्हें अचानक हटाया या बदला जा सकता है.
विशेष छवि प्रकार
एनिमेटेड फ़िल्में
HTML एनिमेटेड GIF की अनुमति देता है:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">छवि संलग्न
किसी छवि को लिंक के रूप में उपयोग करने के लिए, <img> टैग को <a> टैग के अंदर रखें:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>तैरती हुई छवियां
छवि को टेक्स्ट के दाईं या बाईं ओर फ़्लोट करने के लिए CSS फ़्लोट प्रॉपर्टी का उपयोग करें:
दाहिनी ओर तैरना:
यह छवि पाठ के दाईं ओर तैरेगी। सीएसएस फ्लोट विशेषता टेक्स्ट में छवियां जोड़ने का एक शानदार तरीका है। जब छवि तैरती है, तो पाठ उसके चारों ओर प्रवाहित होगा।
बाईं ओर तैरना:
यह छवि पाठ के बाईं ओर तैरेगी। सीएसएस फ्लोट विशेषता आमतौर पर वेब डिज़ाइन में उपयोग किया जाने वाला एक शक्तिशाली उपकरण है। यह सामग्री को व्यवस्थित करने में मदद करता है.
<p><img src='smiley.gif' alt='स्माइली फेस' style='फ्लोट:दाएं;चौड़ाई:42px;ऊंचाई:42px;'> छवि पाठ के दाईं ओर तैरेगी।</p> <p><img src='smiley.gif' alt='स्माइली फेस' style='फ्लोट:बाएं;चौड़ाई:42px;ऊंचाई:42px;'> छवि पाठ के बाईं ओर तैरेगी।</p>सहायता नोट:
सीएसएस फ़्लोट के बारे में अधिक जानने के लिए, हमारे सीएसएस फ़्लोट ट्यूटोरियल पर एक नज़र डालें।
सामान्य छवि प्रारूप
यहां सभी ब्राउज़रों (क्रोम, एज, फायरफॉक्स, सफारी, ओपेरा) द्वारा समर्थित सबसे आम छवि फ़ाइल प्रकार हैं:
| सारांश | फ़ाइल फ़ारमैट | फाइल एक्सटेंशन |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
JPEG
फ़ोटो के लिए
.jpg, .jpeg
PNG
एक्सपोज़र के बाद मेन्नानी
.png
GIF
एनिमेशन के लिए
.gif
SVG
वेक्टर छवियों के लिए
.svg
अध्याय का सारांश
नोट:
बड़ी छवियों को लोड होने में समय लगता है और यह आपके वेब पेज को धीमा कर सकता है। छवियों का उपयोग सावधानी से करें.
अभ्यास
एक छवि जोड़ने के लिए वैध HTML तत्व क्या है?
HTML छवि टैग
| टैग | व्याख्या |
|---|---|
| <img> | एक छवि को परिभाषित करता है |
| <map> | एक छवि मानचित्र को परिभाषित करता है |
| <area> | छवि मानचित्र के अंदर क्लिक करने योग्य भाग को परिभाषित करता है |
| <picture> | एकाधिक छवि संसाधनों के लिए एक कंटेनर को परिभाषित करता है |
नोट:
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।